<template>
  <t-dialog
    v-model:visible="visible"
    :header="dialogTitle"
    width="800"
    :confirm-btn="{ loading }"
    @confirm="dialogConfirm"
    @close="dialogHide"
  >
    <t-form ref="form" reset-type="initial" :data="formData" :rules="FORM_RULES" :label-width="120">
      <t-tabs v-model="active" default-value="1">
        <t-tab-panel value="1" :label="t('pages.category.baseinfo')" :destroy-on-hide="false">
          <t-row :gutter="[15, 24]">
            <t-col :span="6">
              <t-form-item :label="t('pages.category.selectModel')" name="siteModel.id">
                <t-select
                  v-model="formData.siteModel.id"
                  clearable
                  :options="listSiteModel"
                  :keys="{ label: 'name', value: 'id' }"
                >
                </t-select>
              </t-form-item>
            </t-col>
            <t-col :span="6">
              <t-form-item :label="t('pages.category.prevCate')" name="parent.id">
                <t-cascader
                  v-model="formData.parent.id"
                  filterable
                  clearable
                  check-strictly
                  :options="listCategory"
                  :keys="{ label: 'catname', value: 'id' }"
                >
                </t-cascader>
              </t-form-item>
            </t-col>
            <t-col :span="6">
              <t-form-item :label="t('pages.category.name')" name="catname">
                <t-input v-model="formData.catname" maxlength="64" show-limit-number />
              </t-form-item>
            </t-col>
            <t-col :span="6">
              <t-form-item :label="t('pages.category.enName')" name="catnameEn">
                <t-input v-model="formData.catnameEn" maxlength="64" show-limit-number />
              </t-form-item>
            </t-col>
            <t-col :span="6">
              <t-form-item :label="t('pages.category.cateDir')" name="catdir" :help="t('pages.category.dirHelp')">
                <t-input v-model="formData.catdir" maxlength="64" show-limit-number />
              </t-form-item>
            </t-col>
            <t-col :span="6">
              <t-form-item :label="t('pages.category.cateIcon')" name="icon" :help="t('pages.category.cateIconHelp')">
                <t-input v-model="formData.icon" maxlength="64" show-limit-number />
              </t-form-item>
            </t-col>
            <t-col :span="12">
              <t-form-item :label="t('pages.category.cateDesc')" name="description">
                <t-textarea
                  v-model="formData.description"
                  :autosize="{ minRows: 2, maxRows: 5 }"
                  maxlength="255"
                  resize="none"
                  show-limit-number
                />
              </t-form-item>
            </t-col>

            <t-col :span="6">
              <t-form-item :label="t('pages.category.img')" name="cover" :help="t('pages.category.imgHelp')">
                <common-upload :url="formData.cover?.url" type="cover" @confirm="onChooseEnd" @remove="onChooseDel" />
              </t-form-item>
            </t-col>
            <t-col :span="6">
              <t-form-item :label="t('pages.category.icon')" name="imgIcon" :help="t('pages.category.iconHelp')">
                <common-upload
                  :url="formData.imgIcon?.url"
                  type="imgIcon"
                  @confirm="onChooseEnd"
                  @remove="onChooseDel"
                />
              </t-form-item>
            </t-col>
            <t-col :span="12">
              <t-form-item :label="t('common.display')" name="display">
                <t-switch v-model="formData.display" :custom-value="[1, 0]" />
                <template #statusIcon>{{ t('pages.category.showNav') }}</template>
              </t-form-item>
            </t-col>
          </t-row>
        </t-tab-panel>
        <t-tab-panel value="2" :label="t('pages.category.seoinfo')" :destroy-on-hide="false">
          <t-form-item :label="t('common.seoTitle')" name="seoTitle">
            <t-textarea
              v-model="formData.seoTitle"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              maxlength="128"
              resize="none"
              show-limit-number
            />
          </t-form-item>
          <t-form-item :label="t('common.seoKeyword')" name="seoKeywords">
            <t-textarea
              v-model="formData.seoKeywords"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              maxlength="256"
              resize="none"
              show-limit-number
            />
          </t-form-item>
          <t-form-item :label="t('common.seoDescription')" name="seoDescription">
            <t-textarea
              v-model="formData.seoDescription"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              maxlength="256"
              resize="none"
              show-limit-number
            />
          </t-form-item>
        </t-tab-panel>
      </t-tabs>
    </t-form>
  </t-dialog>
</template>
<script setup lang="ts">
import { MessagePlugin } from 'tdesign-vue-next';
import { ref } from 'vue';

import CommonUpload from '@/components/common-upload/index.vue';
import { t } from '@/locales';

import { FORM_DATA, FORM_RULES } from '../constants';

defineProps({
  listSiteModel: {
    type: Array,
    default: () => [],
  },
  listCategory: {
    type: Array,
    default: () => [],
  },
});

const active = ref('1');

const loading = ref(false);
const emits = defineEmits(['confirm', 'removeFile']);

const dialogTitle = ref('');
const type = ref('add');
const visible = ref(false);
const form = ref(null);
const formData = ref({ ...FORM_DATA });

const onChooseEnd = (type: 'cover' | 'imgIcon', { id, url }: Recordable) => {
  formData.value[type] = { id, url };
};
const onChooseDel = (type: 'cover' | 'imgIcon') => {
  formData.value[type] = null;
};

const dialogShow = (action: string, row: Recordable) => {
  visible.value = true;
  type.value = action;
  if (action === 'edit') {
    formData.value = JSON.parse(JSON.stringify(row));

    // 父级菜单关系
    if (row.parent) {
      formData.value.parent = row.parent;
    } else {
      formData.value.parent = { id: 0 };
    }

    dialogTitle.value = `${t('common.edit')}【${row.catname}】`;
  } else if (action === 'addchild') {
    formData.value.id = 0;
    formData.value.parent = row;
    dialogTitle.value = t('common.add');
  } else {
    dialogTitle.value = t('common.add');
  }
};
const dialogHide = () => {
  loading.value = false;
  form.value.reset();
  active.value = '1';
  visible.value = false;
  formData.value.cover = null;
  formData.value.imgIcon = null;
};
const dialogConfirm = async () => {
  const valid = await form.value.validate();

  if (valid !== true) {
    MessagePlugin.warning('有未填写的字段');
    return;
  }
  loading.value = true;
  const res = JSON.parse(JSON.stringify(formData.value));

  emits('confirm', type.value, res);
};
const loadingClear = () => {
  loading.value = false;
};

defineExpose({
  dialogShow,
  dialogHide,
  loadingClear,
});
</script>

<style lang="less" scoped>
.t-tabs :deep(.t-tab-panel) {
  padding-top: 24px;
}
</style>
